<template>
  <div>
    <div class="settlement-audit-wrap">
      <explanation :explanation="explanationObj" :countdown="true" @queryProcessData="queryProcessData" />
      <div class="base-info-wrap">
        <div class="pay-application-title">
          <Title title="结算单基本信息" />
        </div>
        <BaseInfo
          ref="notOrderModuleRef"
          v-model="baseInfo"
          :is-not-order="isNotOrder"
          :step-one-data="detailData"
        />
        <div v-if="!isNotOrder" class="pay-application-tab-list">
          <div :class="{'active': activeTab === 0}" class="tab-item" @click="activeTab = 0">审批单信息</div>
          <div :class="{'active': activeTab === 1}" class="tab-item" @click="activeTab = 1">结算单信息</div>
        </div>
      </div>
      <div class="table-box">
        <div v-show="activeTab === 0">
          <!-- 审批记录 -->
          <ExamineList
            ref="examineRef"
            :is-complete="isClosed || isSettlementComplete"
            :is-creator="isCreator"
            :settle-id="settleId"
            :process="process"
            :operate-data="processData.operation"
            :total-price="detailData.totalPrice"
            :pay-amount="supplierData.payAmount"
            @updateCurrentWithdrawInfo="updateCurrentWithdrawInfo"
            @againLaunch="againLaunch"
            @toEdit="toEdit"
            @updateDetail="updateDetail"
            @isExamin="isExamin"
            @setCreator="setCreator"
            @handleApproverChange="handleApproverChange"
            @getFirstExamineId="getFirstExamineId"
            @examineListInit="examineListInit"
            @emitExamine="emitExamine" />
          <!-- 供应商信息:结算信息 -->
          <div v-if="newWidthdraw && newWidthdraw.examineId" class="examine-tip">
            <span>以下为审批单号</span>
            <span class="label">{{ currentWidthdraw && currentWidthdraw.examineId ? currentWidthdraw.examineId : newWidthdraw.examineId }}</span>
            <span>的单次审批信息</span>
          </div>
          <!-- <SupplierInfo
            ref="supplierInfo"
            :approval-no="approvalNo"
            :is-not-order="isNotOrder"
            :process-status="processData.processStatus"
            :supplier-data="supplierData"
            :process="process" /> -->
          <CurrentWidthdrawInfo
            ref="CurrentWidthdrawInfoRef"
            :settle-id="settleId"
            :is-creator="isCreator"
            :examin-id="examinId"
            :current-widthdraw="currentWidthdraw"
            :operation-set-events="operationSetEvents"
            :is-current-version="isCurrentVersion"
            :process-data="processData"
            :total-price="detailData.totalPrice"
            :detail-data="detailData"
            :is-not-order="detailData.isNotOrder"
            @updateDetail="updateDetail"
            @setCurrentAccountType="setCurrentAccountType"
          />
        </div>
        <costAndOrderList
          v-if="!detailData.isNotOrder"
          v-show="activeTab === 1"
          slot="middle"
          :cost-belong="costBelong"
          :settle-id="settleId"
          :detail-data="detailData"
          :step-one-data="detailData"
          :supplier-id="supplierId"
          :examin-id="examinId"
          :is-complete="isClosed || isSettlementComplete"
          :set-is-examineing="{
            isExamineing: isExamineing,
            isExamined: isExamined
          }"
          :operate-data="processData.operation"
          :process-status="processData.processStatus"
          :settle-schedule="detailData.settleSchedule"
          style="margin-top:16px"
          @updateDetail="updateDetail" />
      </div>
      <div v-if="showProcessFlow" class="suspend-btn" @click="showProcess">
        <i class="el-icon-arrow-left icon"/>
        <div class="text">
          <div style="margin-bottom:3px;">审批</div>
          <div>流程</div>
        </div>
      </div>
      <el-drawer
        :visible.sync="isShowProcess"
        :with-header="false"
        :size="'34%'"
        :modal-append-to-body="false"
        append-to-body
        custom-class="process-drawer process-drawer-bg">
        <div>
          <div class="progress-type-box">
            <div :class="progressType === 0 ? 'active' : ''" class="progress-type-btn" @click="progressType = 0">审批日志</div>
            <div :class="progressType === 1 ? 'active' : ''" class="progress-type-btn" @click="progressType = 1">审批进度</div>
            <div v-if="hasRouteAuth('crm:supplierAudit:record:read')" :class="progressType === 2 ? 'active' : ''" class="progress-type-btn" @click="progressType = 2">修改记录</div>
          </div>
          <div :class="{'process-content-box':progressType !== 2}">
            <auditProcess
              v-loading="listLoading"
              v-if="progressType === 0"
              :list="processCollectionList"
              :process-status="processData.processStatus"
              :comment-status="commentStatus"
              :all-approver="allApprover"
              :is-creator="hasPressAuth"
              :approval-module-type="APPROVAL_MODULE_TYPE.SUPPLIER_AUDIT"
              @onCommentStatusChange="onCommentStatusChange"
              @showCommentDialog="showCommentDialog"
              @onReplyComment="onReplyComment"
              @reloadComment="getProcessList(workFlowId)" />
            <AuditProgressWrap
              v-else-if="progressType === 1"
              :default-aduitor-list="proposer"
              :flow-structure="auditScheduleData"
              :operate-data="processData.operation"
              :process-data="auditScheduleData"
              :has-press-auth="hasPressAuth"
              :process-status="processData.processStatus"
              :redirect-url="`/businessPage/supplierDetail`"
              :senders="senders"
              @addSigner="addSigner"
              @handlePressSend="handlePressSend"
              @pressSendMsg="pressSendMsg" />
            <RecordList v-else-if="progressType === 2" ref="recordList" :id="workFlowId" :type="0" @freshDetail="freshDetail" @getHistoryDetail="getSupplierHistoryDetail" @setCurrentVersion="setCurrentVersion"/>
            <empty-placeholder v-else style="height: 400px;" />
          </div>
        </div>
      </el-drawer>
      <processOperation
        :examine-status="newWidthdraw ? newWidthdraw.examineStatus : null"
        :current-examine-status="currentExamineStatus !== null ?currentExamineStatus : (newWidthdraw ? newWidthdraw.examineStatus : null)"
        :operate-data="processData.operation"
        :process-data-list="processData.list"
        :is-draft="detailData.isDraft"
        :is-current-version="isCurrentVersion"
        :is-creator="isCreator"
        :is-create="isCreator"
        :is-complete="isClosed || isSettlementComplete"
        :is-not-order="isNotOrder"
        :process-status="processData.processStatus"
        :flow-structure="auditScheduleData"
        :is-show-examine="isShowExamine"
        :is-examineing="isExamineing"
        :is-examined="isExamined"
        :examin-id="examinId"
        :type="2"
        :process="process"
        :disabled="false"
        :is-apply="isApply"
        :show-comment-btn="!!(showProcessFlow && !showMobilePage)"
        :show-print-btn="examinId && !detailData.isDraft && !showMobilePage"
        :payment-status="paymentStatus"
        :comment-total="getCommentTotal"
        :need-rest="needRest"
        class="processOperation-btn"
        @toEdit="toEdit"
        @againLaunch="againLaunch"
        @handleRevocation="handleRevocation"
        @handleCreateNew="handleSupplierCreateNew"
        @handleRecall="handleRecall"
        @handleSendMsg="handleSendMsg"
        @handleRecallAll="handleRecallAll"
        @handleAudit="handleAudit"
        @launchExamine="launchExamine"
        @successSettle="successSettle"
        @closeSettle="closeSettle"
        @handlePressSend="handlePressSend"
        @handleAddSigner="handleAddSigner"
        @deliverTo="deliverTo"
        @toBack="toBack"
        @toPay="toPay"
        @showCommentDialog="showCommentDialog"
        @handleComment="showCommentDialog"
        @handleExamineBack="handleExamineBack"
        @handleModify="handleModify"
        @handleCancelPress="handleCancelPress"
        @handleToggleProcess="handleToggleProcess"
        @handleSupplierApproverChange="handleApproverChange"
        @handlePrint="printTable"
        @handleSettleCopy="handleSettleCopy"
        @handleCloseProcess="handleCloseProcess"
      >
        <el-button
          v-if="!detailData.isDraft && currentWidthdraw && [2, 3].includes(currentAccountType) && operationSetEvents.includes(4) && (currentWidthdraw.examineStatus === 0|| currentWidthdraw.examineStatus === 1)"
          :style="`${showMobilePage ? 'margin-left: 0' : ''}`"
          :loading="saveLoading"
          type="primary"
          size="small"
          class="submit-btn empty-btn-style"
          @click="saveInvole(currentWidthdraw)">保存</el-button>
        <el-button
          v-if="detailData.isDraft && isCreator"
          type="primary"
          size="small"
          class="submit-btn empty-btn-style"
          @click="toDraft(newWidthdraw)">编辑草稿</el-button>
        <el-button
          v-if="isSettlementComplete && hasRouteAuth('medium:supplierAudit:higherRecall')"
          :style="showMobilePage?{marginRight: '10px'}:''"
          type="danger"
          size="small"
          plain
          @click="handleHigherRecall">撤回结算</el-button>
        <el-button
          v-if="hasRouteAuth('crm:supplierAudit:withdrawPay') && process === 2 && paymentStatus"
          type="danger"
          size="small"
          class="submit-btn"
          @click="handleWithdraw">撤回付款</el-button>
      </processOperation>
      <auditDialog
        :loading="auditLoading"
        :type="type"
        :operate-data="processData.operation"
        :default-aduitor-list="proposer"
        :create-user="workCreator || {}"
        :dialog-form-visible="dialogFormVisible"
        :content="processData.operation.content"
        :audit-schedule-data="auditScheduleData"
        @close="closeDialog"
        @handleSubmit="handleSubmit"/>
      <DiversAuditorDialog ref="auditorDialog" :can-empty="false" @userSelect="sumbmitDeliverTo" @handleSender="handleSender"/>
      <printTemplate :print-data="printData" :is-allocation="currentInfo.isAllocation" />
      <ApproverChange
        ref="approverChangeDialog"
        :business-type="BUSINESS_TYPE.SETTLE"
        :ids="selectedId"
        @changeCallBack="queryProcessData"
      />
    </div>
    <CommentDialog
      ref="commentDialogRef"
      :comments-id="settleId"
      :comment-module="COMMENT_MODULE.SETTLE"
      :add-comment-api="supplierSettlesCommentAdd"
      @sendCallback="commentSendCallback"
    />
    <ding-ding-dialog
      ref="pressSendDialogRef"
      :btn1="'确认加急'"
      :btn2="'取消'"
      :show-send-checkbox="false"
      :select-with-user-load="false"
      :default-list="pressDefaultList"
      redirect-url="/businessPage/supplierDetail"
      summary-title="加急原因"
      title="催办通知"
      @handelOK="toSend" />
  </div>
</template>
<script>
// components
import EmptyPlaceholder from '@/components/EmptyPlaceholder';
import CommentDialog from '@/components/Common/commentDialog';
import costAndOrderList from '../module/costAndOrderList';
import ExamineList from '../examineList';
import printTemplate from '../module/printTemplate';
import CurrentWidthdrawInfo from '@/components/SupplierComponent/currentWidthdrawInfo';
import auditProcess from '@/components/AuditProcess/index';
import processOperation from '@/components/AuditProcess/processOperation';
import auditDialog from '@/components/AuditProcess/auditDialog';
import explanation from '@/components/Common/explanation';
import ApproverChange from '@/components/Common/auditProcess/approverChange';
import RecordList from '@/components/Common/auditProcess/recordList';
import AuditProgressWrap from '@/components/Common/auditProcess/auditProgress';
import DiversAuditorDialog from '@/components/Common/auditProcess/module/diversAuditorDialog';
import BaseInfo from './baseInfo';
import Title from '@/components/Title';
// utils
import { hasRouteAuth } from '@/utils/permission';
import ElMessage, { showModal } from '@/utils/message';
import { BUSINESS_TYPE, COMMENT_STATUS, PROCESS_TYPE } from '@/utils/const/process';
import { MessageBox } from 'element-ui';
import { COMMENT_MODULE, APPROVAL_MODULE_TYPE } from '@/utils/const';
import { encryption } from '@/utils';
import { mapState } from 'vuex';
// mixin
import printMixin from '../module/printMixin';
import schedule from '@/mixins/schedule';
import commentDel from '@/mixins/commentDel';
import filterObjStoreMixin from '@/mixins/filterObjStore';
import setProcessLog from '@/mixins/setProcessLog';
// api
import {
  examineBack,
  examineOperate,
  examineComplete,
  supplierCloseAccountRecall,
  setInvoleList,
  getSupplierSettlesComments,
  supplierSettlesCommentAdd,
  currentWidthdrawInfo,
  settlementBack,
  examinePay,
  examineCancel,
  withdrawPay
} from '@/api/supplier';
import {
  postRecall,
  scheduleCounterSign,
  sumbDeliverTo,
  getProcessList,
  getApproveLatestInfo,
  pressSendMsg } from '@/api/legal';
import { getHistoryDetail } from '@/api/process';

export default {
  name: 'SettlementAudit',
  components: {
    EmptyPlaceholder, CurrentWidthdrawInfo,
    costAndOrderList, ExamineList,
    auditProcess, processOperation, auditDialog,
    AuditProgressWrap, DiversAuditorDialog,
    printTemplate, ApproverChange, BaseInfo,
    CommentDialog, explanation, RecordList, Title
  },
  mixins: [printMixin, schedule, commentDel, filterObjStoreMixin, setProcessLog],
  props: {
    supplierId: { // 供应商id
      type: Number | String,
      default: () => null
    },
    settleId: { // 结算单id
      type: Number | String,
      default: () => null
    },
    supplierData: { // 供应商信息
      type: Object,
      default: () => {
        return {};
      }
    },
    process: {
      type: Number,
      default: 1
    },
    detailData: {
      type: Object,
      default: () => {
        return null;
      }
    },
    newWidthdraw: { // 该字段展示详情页中当前请款信息(最新一条审批单信息)
      type: Object,
      default: null
    },
    costBelong: {
      type: Number,
      default: 0
    },
    isNotOrder: { // 是否为非订单付款
      type: Boolean,
      default: false
    },
    isSettlementComplete: { // 判断是否为结算完成
      type: Boolean,
      default: false
    },
    isClosed: {// 是否已关闭
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      supplierSettlesCommentAdd,
      COMMENT_MODULE,
      BUSINESS_TYPE,
      APPROVAL_MODULE_TYPE,
      processData: {
        list: [],
        operation: {
          auth: [],
          content: null
        }
      },
      approvalNo: '', // 审批单号
      progressType: 0,
      deliverToType: null, // 转交类型 暂存
      currentExamineStatus: null,
      currentAccountType: null,
      currentInfo: {},
      currentWidthdraw: null,
      isShowProcess: false, // 展示流程
      auditLoading: false,
      type: null,
      dialogFormVisible: false,
      workFlowId: null, // 流程ID
      workCreator: null,
      examinId: null,
      isShowExamine: false,
      isExamineing: false,
      isExamined: false,
      operationSetEvents: [], // 当前流程节点，所开启的事件数组
      selectedId: '', // 选中的变更人员审批id
      listLoading: false,
      commentStatus: COMMENT_STATUS.SHOW_ALL,
      commentTotal: 0,
      commentList: [], // 评论列表
      processCollectionList: [], // 评论和日志排序后的合集
      isCreator: false,
      paymentStatus: null,
      isModifyForm: 0,
      baseInfo: {},
      firstSupplierId: null, // 创建时间最早的审批记录id
      activeTab: 0, // 0:本次审批单信息 1:结算单信息
      saveLoading: false, // 保存按钮loading
      examineAllStatus: false, // 审批列表-审批进度状态都为已完成/已作废时，会被置为true
      doneTotal: 0 // 审批列表已完成的结算金额总和
    };
  },
  computed: {
    ...mapState({
      'userInfo': state => state.user.userInfo,
      'showMobilePage': state => state.app.showMobilePage
    }),
    proposer() {
      if (!this.currentInfo) {
        return [];
      }
      const { proposerName, proposer } = this.currentInfo;
      const data = [{
        userName: proposerName,
        id: proposer
      }];
      return data;
    },
    isAdmin() {
      return this.userInfo.userName === '管理员';
    },
    hasPressAuth() { // 是创建者或管理员
      return this.isAdmin || this.isCreator;
    },
    getContinueApproveStatus() {
      const continueApproveLocalKey = 'CONTINUE_APPROVE_' + this.userInfo.id;
      const getApproveLocalStatus = window.localStorage.getItem(continueApproveLocalKey);
      return ![null, 'false'].includes(getApproveLocalStatus);
    },
    showProcessFlow() {
      return !this.detailData.isDraft && this.processData.list && this.processData.list.length;
    },
    getCommentTotal() {
      return this.commentTotal > 99 ? '99+' : this.commentTotal;
    },
    inviteUrl() {
      const inviteCode = encryption(this.settleId);
      return `${location.origin}#/businessPage/supplierDetail?settleId=${this.settleId}&id=${this.supplierId}&isSettle=true&isInvite=${inviteCode}`;
    },
    isEditInvoice() {
      // 当前审批节点是否需要填写发票
      return this.operationSetEvents.includes(4) && [0, 1].includes(this.currentWidthdraw.examineStatus) && this.isCurrentVersion;
    },
    isApply() { // 申请人
      const proposerId = this.currentInfo && this.currentInfo.proposer ? this.currentInfo.proposer : '';
      return proposerId && this.userInfo.id === proposerId;
    },
    needRest() { // 是否需要申请余款
      // examineAllStatus 审批进度状态都为已完成/已作废时,返回是true
      if (!this.examineAllStatus) return false;
      if (this.isNotOrder) {
        // 非订单：结算总金额 - 审批记录列表已完成的结算金额总和 > 0
        const total = this.baseInfo.settleAmountTotal;
        return (total - this.doneTotal) > 0;
      } else {
        // 订单：下面的订单结算总金额 - 审批记录列表已完成的结算金额总和
        const total = this.currentInfo.collectMoneyData ? (this.currentInfo.collectMoneyData.settlementAmountTotal / 100) : 0;
        return (total - this.doneTotal) > 0;
      }
    }
  },
  created() {
    this.init();
    if (this.$route.query.isAgainLaunch && this.$route.params) {
      this.$nextTick(() => {
        this.againLaunch(this.$route.params, () => {
          this.$router.push({ name: 'supplier' });
        });
      });
    }
  },
  methods: {
    hasRouteAuth,
    init() {
      const examineId = this.$route.query.examineId;
      const createNew = this.$route.query.examineId;
      if (this.isNotOrder && createNew && examineId) {
        this.getCurrentInfo(examineId);
      }
      if (this.newWidthdraw && (this.newWidthdraw.workFlowId || this.newWidthdraw.isDraft)) {
        if (!this.$route.query.isContinueApprove) {
          this.currentWidthdraw = this.newWidthdraw;
          this.initInfo();
        }
        this.isShowExamine = false; // 首次进入如果没有创建过审批单的话（newWidthdraw === null）则为true
      } else {
        this.isShowExamine = true; // 否则需要展示发起审批的按钮提供用户再次发起（复制）审批的入口
      }
      this.$set(this.baseInfo, 'channelName', this.detailData.supplier);
      this.$set(this.baseInfo, 'settlementMethod', this.detailData.settlementMethod);
      this.$set(this.baseInfo, 'supplierSource', this.detailData.costBelong);
      this.$set(this.baseInfo, 'creator', this.detailData.createUser);
      this.$set(this.baseInfo, 'settleAmountTotal', this.detailData.settleAmountTotal);
    },
    /**
     * 获取数据
     */
    updateCurrentWithdrawInfo(val) { // 更新当前的请款信息
      this.currentWidthdraw = val;
      this.$nextTick(() => {
        if (this.$refs.examineRef) this.$refs.examineRef.currentRowKey = this.currentWidthdraw.id;

        const id = val.id;
        this.examinId = val.id; // 审批单ID
        this.approvalNo = val.examineId; // 审批单号
        this.$refs.CurrentWidthdrawInfoRef.getInfo(id);
        this.workFlowId = val.workFlowId;
        this.currentExamineStatus = val.examineStatus;
        this.paymentStatus = val.paymentStatus;
        this.isModifyForm = val.isModifyForm;
        // this.isExamineing = val.isExamineing; // 获取审批单列表中是否存在审批中
        this.valuationWorkCreator(val);
        this.getProcessList(val.workFlowId);
        this.getAuditSchedule(val.workFlowId);
        this.$nextTick(() => {
          this.$refs.recordList && this.$refs.recordList.getRecords();
        });
      });
    },
    // 更新表单数据
    freshDetail() {
      this.$refs.CurrentWidthdrawInfoRef.getInfo(this.currentWidthdraw.id);
    },
    // 更新审批流程数据
    queryProcessData() {
      this.getProcessList(this.workFlowId);
      this.getAuditSchedule(this.workFlowId);
      this.$refs.examineRef.getExamineList();
      this.updateDetail();
    },
    getAuditSchedule(id) {
      if (!id) { return; }// 草稿不请求
      this.requestAuditSchedule(id);
    },
    updateDetail() {
      this.$emit('updateDetail');
    },
    /**
      * 逻辑操作
      */
    // 获取审批单列表中是否存在审批中或已完成，用于判断关闭结算和完成结算的按钮
    isExamin(isExamineing, isExamined) {
      this.isExamineing = isExamineing;
      this.isExamined = isExamined;
    },
    setCreator(list = []) {
      let arr = list;
      arr.push(this.detailData.creatorId);
      arr = [...new Set(arr)];
      if (arr.includes(this.userInfo.id)) {
        this.isCreator = true;
      } else {
        this.isCreator = false;
      }
    },
    getFirstExamineId(id) {
      this.firstSupplierId = id;
    },
    examineListInit(items) {
      if (items && items.length > 0) {
        const first = items[0];
        this.valuationWorkCreator(first);
        this.approvalNo = first.examineId;
        this.paymentStatus = first.paymentStatus;
        this.isModifyForm = first.isModifyForm;
      }
    },
    emitExamine(allStatus, doneTotal) {
      this.examineAllStatus = allStatus;
      this.doneTotal = doneTotal;
    },
    valuationWorkCreator(data) {
      const { creator, creatorId, creatorAvatar, creatorAvatarPost } = data;
      this.workCreator = {
        userName: creator || '',
        id: creatorId || '',
        avatar: creatorAvatar || '',
        post: creatorAvatarPost || ''
      };
    },
    initInfo() { // 首次进入展示流程列表
      this.workFlowId = this.newWidthdraw ? this.newWidthdraw.workFlowId : null;
      this.examinId = this.newWidthdraw ? this.newWidthdraw.id : null;
      this.getProcessList(this.newWidthdraw.workFlowId);
      this.getAuditSchedule(this.newWidthdraw.workFlowId);
    },
    /**
     * 流程操作
     */
    // 选择完加签人的逻辑
    addSigner(data) {
      const param = {
        id: this.workFlowId,
        examineRoles: [data]
      };
      scheduleCounterSign(param).then(res => {
        if (res.code === 200) {
          this.getAuditSchedule(this.workFlowId);
          this.getProcessList(this.workFlowId);
        }
      });
    },
    // 点击加签按钮逻辑
    handleAddSigner() {
      this.isShowProcess = true;
      this.progressType = 1;
    },
    // 转交
    sumbmitDeliverTo(data) {
      const type = this.deliverToType;
      if (!data.selectUser || data.selectUser.length === 0) {
        this.$message({ type: 'warning', message: '请选择转交人' });
        return;
      }
      let params;
      if (type === 1) {
        params = {
          id: this.workFlowId,
          type,
          deliver: data.selectUser[0].id
        };
      } else {
        params = {
          id: this.workFlowId,
          type,
          deliver: data.selectUser[0].id,
          examineRoleId: this.processData.operation.examineRoleId
        };
      }
      sumbDeliverTo(params).then(res => {
        if (res.code === 200) {
          this.$message({
            type: 'success',
            message: '转交成功'
          });
          this.getAuditSchedule(this.workFlowId);
          this.getProcessList(this.workFlowId);
        }
      });
      this.deliverToType = null;
    },
    // 转交
    deliverTo(type) { // type: 1: 申请人转交；2：审批转交
      this.$refs.auditorDialog.dialogVisible = true;
      this.deliverToType = type;
      let title = '';
      switch (type) {
        case 1:
          title = '申请人转交';
          break;
        case 2:
          title = '转交';
          break;
      }
      this.$refs.auditorDialog.initDeliverTo(1, title);
    },
    async getProcessList(workFlowId) { // 流程列表
      if (!workFlowId) { return; }// 草稿不请求，2.9.7
      try {
        this.listLoading = true;
        this.commentList = [];
        if (this.commentStatus !== COMMENT_STATUS.SHOW_COMMENT) {
          const params = { id: workFlowId };
          const processResult = await getProcessList(params);
          this.processData = processResult.data;
          this.operationSetEvents = this.processData.operation.setEvents || [];
        }
        if (this.commentStatus !== COMMENT_STATUS.HIDE_COMMENT) {
          const commentParams = Object.create(null);
          commentParams.id = this.settleId;
          commentParams.page = 1;
          commentParams.perPage = 0;
          const commentResult = await getSupplierSettlesComments(commentParams);
          this.commentList = commentResult.data;
          this.commentTotal = commentResult.count;
        }
        const processList = this.commentStatus !== COMMENT_STATUS.SHOW_COMMENT ? _.cloneDeep(this.processData.list) : [];
        this.$nextTick(() => {
          this.processCollectionList = this.setProcessList(processList);
        });
        this.listLoading = false;
      } catch (error) {
        this.listLoading = false;
      }
    },
    toPay() {
      showModal('请确认是否已支付？').then(() => {
        examinePay(this.examinId).then(res => {
          this.$message.success('付款成功');
          this.$refs.examineRef.getExamineList(true);
          this.$emit('updateDetail');
        }).catch(err => {
          console.error(err);
        });
      });
    },

    handleCloseProcess(params) {
      showModal('请确认是否结束流程', '', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        customClass: 'del-message del-message-cancel inloive-abandon-message-btn-margin',
        lockScroll: false,
        iconClass: 'del-icon'
      }).then(() => {
        this.handleRevocation();
      });
    },
    handleExamineBack() {
      showModal('当前审批任务已完成，撤回后审批任务重新开始，请谨慎操作', '', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
        lockScroll: false,
        center: true,
        iconClass: 'del-icon'
      }).then(() => {
        examineCancel({ id: this.examinId }).then(res => {
          if (res.code === 200) {
            this.$message.success('撤回成功');
            this.$refs.examineRef.getExamineList(true);
            this.$emit('updateDetail');
          } else {
            this.$message.error(res.message);
          }
        });
      });
    },
    showProcess() {
      this.isShowProcess = true;
    },
    // 撤回
    handleRecall(auth) {
      const h = this.$createElement;
      const recallAll = () => {
        MessageBox.close();
        this.handleRecallAll(false);
      };
      const recallPrev = () => {
        MessageBox.close();
        this.handleRecallPrev(false);
      };
      const customClass = `${this.showMobilePage ? ' mobile-message' : ''}`;
      if (auth.includes(5) && auth.includes(3)) {
        MessageBox.confirm('', '', {
          message: h('p', null, [
            h('div', null, '请确认撤回至哪个步骤'),
            h('div', { class: 'btns-container' }, [
              h('el-button', { on: { click: recallAll }, class: '', props: { type: 'primary' }}, '撤回至任务发起'),
              h('el-button', { on: { click: recallPrev }, class: '' }, '撤回至上一步'),
              h('el-button', { on: { click: MessageBox.close }, class: 'cancel-btn' }, '返回')
            ])
          ]),
          confirmButtonText: '',
          cancelButtonText: '',
          showClose: false,
          showCancelButton: false,
          showConfirmButton: false,
          type: 'warning',
          lockScroll: false,
          customClass: 'del-message del-message-cancel message-box-order' + customClass,
          iconClass: 'del-icon',
          center: true
        });
      } else if (auth.includes(3)) {
        this.handleRecallPrev();
      } else {
        this.handleRecallAll();
      }
    },
    handleRecallPrev(confirm = true) {
      const params = {
        id: this.workFlowId,
        type: 0
      };
      if (confirm) {
        showModal('请确认是否撤回', '', {
          confirmButtonText: '确定',
          cancelButtonText: '返回',
          lockScroll: false,
          iconClass: 'del-icon'
        }).then(() => {
          this.handlePostRecall(params);
        });
      } else {
        this.handlePostRecall(params);
      }
    },
    handlePostRecall(params) {
      postRecall(params).then(res => {
        if (res.code === 200) {
          this.$message({ type: 'success', message: '撤回成功' });
          this.$refs.examineRef.getExamineList(true);
          this.$emit('updateDetail');
          this.getProcessList(this.newWidthdraw.workFlowId);
          this.getAuditSchedule(this.newWidthdraw.workFlowId);
          this.workFlowId = this.newWidthdraw.workFlowId;
        } else {
          this.$message.closeAll();
          this.$message({ type: 'error', message: res.message });
        }
      }).catch(err => {
        console.log(err);
        this.$message.closeAll();
        this.$message({ type: 'error', message: err.message });
      });
    },
    // 撤回至发起
    handleRecallAll(confirm = true) {
      const params = {
        id: this.workFlowId,
        type: 1
      };
      if (confirm) {
        showModal('请确认是否撤回', '', {
          confirmButtonText: '撤回至任务发起',
          cancelButtonText: '返回',
          lockScroll: false,
          customClass: 'del-message del-message-cancel message-btn-margin',
          iconClass: 'del-icon'
        }).then(() => {
          this.handlePostRecall(params);
        });
      } else {
        this.handlePostRecall(params);
      }
    },
    // 高级撤回
    handleHigherRecall() {
      const msg = '请确认是否撤回？';
      showModal(msg, '', {
        confirmButtonText: '确定',
        type: 'warning',
        showClose: false,
        center: true,
        iconClass: 'charge-icon',
        customClass: 'del-message del-message-cancel'
      }).then(() => {
        settlementBack({ id: this.settleId }).then(res => {
          if (res.code === 200) {
            this.$message.success('撤回成功');
            // 跳转至请款审批页面
            this.$emit('updateDetail');
          } else {
            this.$message.error(res.message);
          }
        });
      });
    },
    // 撤回付款
    handleWithdraw() {
      showModal('撤回付款后，该审批单的付款状态将会变更为“未付款”，是否确认撤回？').then(_ => {
        withdrawPay(this.examinId).then(res => {
          if (res.code === 200) {
            ElMessage.success('操作成功');
            this.$refs.examineRef.getExamineList(true);
            this.$emit('updateDetail');
          }
        }).catch(_ => {});
      });
    },
    handleRevocation() { // 撤销
      const params = {
        workFlowId: this.workFlowId
      };
      examineBack(this.examinId, params).then(res => {
        if (res.code === 200) {
          this.$message({ type: 'success', message: '作废成功' });
          this.$refs.examineRef.getExamineList(true);
          this.$emit('updateDetail');
          this.getProcessList(this.workFlowId);
          this.getAuditSchedule(this.workFlowId);
        } else {
          this.$message({ type: 'error', message: res.message });
        }
      }).catch(err => {
        console.log(err);
      });
    },
    closeDialog() {
      this.dialogFormVisible = false;
    },
    // 审批
    async handleSubmit(type, data) {
      this.auditLoading = true;
      const tempData = this.$refs.CurrentWidthdrawInfoRef._data;
      // v3.2.6之前,点击同意会保存发票
      // if (type === 1 && [2, 3].includes(tempData.widthdrawInfo.accountType) && tempData.widthdrawInfo.invoice !== 2) {
      // v3.2.6点击同意&拒绝都要保存发票
      // if ([2, 3].includes(tempData.widthdrawInfo.accountType) && tempData.widthdrawInfo.invoice !== 2) {
      if ([2, 3].includes(tempData.widthdrawInfo.accountType) && tempData.widthdrawInfo.invoice !== 2 && this.isEditInvoice) {
        // 当发票列表有数据时，需要调用保存发票的方法
        try {
          await this.saveInvole(this.currentWidthdraw, true);
          this.auditLoading = false;
        } catch (_) {
          this.auditLoading = false;
          this.closeDialog();
          return;
        }
      }
      const params = Object.assign({
        id: this.workFlowId,
        status: type,
        examineRoleId: this.processData.operation.examineRoleId
      }, data);
      try {
        await examineOperate(this.examinId, params);
        this.auditLoading = false;
        this.$message.success('提交成功');
        if (!this.getContinueApproveStatus) {
          this.submitCallBack();
        } else {
          this.closeDialog();
          this.continueNextApprove();
        }
      } catch (_) {
        this.auditLoading = false;
        this.closeDialog();
      }
    },
    submitCallBack() {
      this.$refs.examineRef.getExamineList(true);
      this.getProcessList(this.workFlowId);
      this.getAuditSchedule(this.workFlowId);
      this.auditLoading = false;
      this.$emit('updateDetail');
      this.closeDialog();
    },
    // 继续下一个审批
    continueNextApprove() {
      const params = Object.create(null);
      params.businessType = BUSINESS_TYPE.SETTLE;
      params.processId = this.workFlowId;
      params.filterData = this.getFilterObj(PROCESS_TYPE.SETTLE);
      getApproveLatestInfo(params).then(res => {
        if (res.data.finished) { // 是否所有审批都已完成
          this.reloadApproveDetail();
          this.$nextTick(() => {
            this.$emit('updateDetail');
            if (this.getContinueApproveStatus) {
              const message = this.getFinishedMessage(PROCESS_TYPE.SETTLE);
              this.$message.closeAll();
              this.$message.success(message);
            }
          });
        } else {
          this.goNextApproveDetail(res.data);
        }
      }).catch(_ => {
        this.reloadApproveDetail();
      });
    },
    // 跳转付款详情页
    goNextApproveDetail(data) {
      const randomNum = Math.floor(Math.random() * 10000);
      const { fromTodo, fromList } = this.$route.query;
      this.$router.push({
        name: 'supplierDetail',
        query: {
          settleId: data.id,
          id: data.supplierId,
          isSettle: true,
          isContinueApprove: true,
          randomNum,
          fromTodo,
          fromList
        }
      });
    },
    // 如果审批全部已完成，刷新路由(此处涉及判断，不可用go(0))
    reloadApproveDetail() {
      const { settleId, fromList } = this.$route.query;
      const supplierId = this.$route.query.id;
      this.$router.replace({
        name: 'supplierDetail',
        query: {
          settleId,
          fromList,
          id: supplierId,
          isSettle: true
        }
      });
    },
    handleAudit(type) { // 确认流程（同意or拒绝）
      this.type = type;
      this.dialogFormVisible = true;
    },
    /**
     * 编辑、再次发起（复制）等操作
     */
    launchExamine() { // 发起审批
      const tempExamineList = this.$refs.examineRef._data.examineList.items;
      // 审批记录存在未过审、已撤回状态的记录,需提示
      const tempBoolean = tempExamineList.some(item => {
        return (item.examineStatus === 2 || item.examineStatus === 5);
      });
      if (tempBoolean) {
        this.$message.warning('存在未完成的审批，请先处理后再发起审批');
        return;
      }
      // 判断结算金额结算完成后不允许再次发起（复制）
      if (!this.isNotOrder && this.supplierData.payAmount === this.detailData.totalPrice) {
        this.$message.warning('金额已结算完成，不允许发起审批');
      } else {
        const newQuery = JSON.parse(JSON.stringify(this.$route.query));
        if (!newQuery.settleId) return;
        // 在同一个结算单上发起一个新的审批单 isLaunchExamine 1:发起审批，不会填内容 2:申请余款，回填内容
        newQuery.isLaunchExamine = 1;
        // 多次结算的结算单，在已有审批单的情况下，新建审批单时，复用第一个审批单的合同信息、发票信息
        if (this.baseInfo.settlementMethod === 0) {
          newQuery.firstSupplierId = this.firstSupplierId || null;
        }
        if (this.newWidthdraw.id) newQuery.examineId = this.newWidthdraw.id;
        if (newQuery.disabledSettleAmount) delete newQuery.disabledSettleAmount;
        if (this.isExamined) newQuery.disabledSettleAmount = 1;
        // 审批记录存在已完成，需带参数跳转
        const completeStatus = tempExamineList.some(item => {
          return item.examineStatus === 4;
        });
        newQuery.completeStatus = completeStatus;
        this.$router.push({
          name: 'supplierCreate',
          query: newQuery
        });
      }
    },
    handleSettleCopy() {
      const routeUrl = this.$router.resolve({
        name: 'supplierCreate',
        query: {
          createNew: 1,
          isNotOrder: 1,
          examineId: this.examinId, // 当前审批单id
          isDeleteInvoiceId: 1 // 再次发起（复制）需要删除发票列表的id
        }
      });
      window.open(routeUrl.href, '_blank');
    },
    againLaunch(row, cb) { // 再次发起（复制）审批
      if (!this.isNotOrder && this.supplierData.payAmount === this.detailData.totalPrice) {
        this.$message.warning('金额已结算完成，不允许发起审批');
        if (cb) cb();
      } else {
        const newQuery = JSON.parse(JSON.stringify(this.$route.query));
        if (!newQuery.settleId) return;
        delete newQuery.isAgainLaunch;
        // 在同一个结算单上发起一个新的审批单 isLaunchExamine 1:发起审批，不会填内容 2:申请余款，回填内容
        newQuery.isLaunchExamine = 2;
        newQuery.examineId = row.id;
        newQuery.isDeleteInvoiceId = 1;
        if (newQuery.disabledSettleAmount) delete newQuery.disabledSettleAmount;
        if (this.isExamined) {
          newQuery.disabledSettleAmount = 1;
        }
        // 审批记录存在已完成，需要带参数跳转
        const tempExamineList = this.$refs.examineRef._data.examineList.items;
        const completeStatus = tempExamineList.some(item => {
          return item.examineStatus === 4;
        });
        newQuery.completeStatus = completeStatus;
        this.$router.push({
          name: 'supplierEdit',
          query: newQuery
        });
      }
    },
    toEdit(row) { // 修改
      const tempExamineList = this.$refs.examineRef._data.examineList.items;
      // 审批记录存在已完成的状态的记录,不可修改结算名称
      const exitFinish = tempExamineList.some(item => {
        return item.examineStatus === 4;
      });
      const newQuery = JSON.parse(JSON.stringify(this.$route.query));
      if (!newQuery.settleId) return;
      delete newQuery.fromList;
      newQuery.examineId = row.id;
      newQuery.exitFinish = exitFinish ? 1 : 0;
      if (row.isModifyForm) {
        newQuery.isModifyForm = 1;// 修改版本号
        newQuery.currentProcessIndex = this.currentProcessIndex;
        newQuery.modifyNodeId = this.modifyNodeId;
      } else if (this.isExamined) {
        newQuery.isExamined = this.isExamined;
      }
      if (newQuery.disabledSettleAmount) delete newQuery.disabledSettleAmount;
      if (this.isExamined) {
        newQuery.disabledSettleAmount = 1;
      }
      this.$router.push({
        name: 'supplierEdit',
        query: newQuery
      });
    },
    toDraft(row) { // 草稿
      this.toEdit(row);
    },
    handleSupplierCreateNew() { // 再次发起（复制）,新建一个结算单
      if (!this.isNotOrder) {
        this.$message.error('仅非订单付款可复制结算单');
      } else {
        const routeUrl = this.$router.resolve({
          name: 'supplierCreate',
          query: {
            createNew: 1,
            isNotOrder: 1,
            // settleId: this.settleId,
            examineId: this.examinId, // 当前审批单id
            isDeleteInvoiceId: 1 // 再次发起（复制）需要删除发票列表的id
          }
        });
        window.open(routeUrl.href, '_blank');
      }
    },
    /**
     * 操作
     */
    // 当前请款信息
    getCurrentInfo(withDrawId) {
      // withDrawId 审批单id--需修改由下面的审批单提供
      return currentWidthdrawInfo(withDrawId).then(res => {
        if (!res.data.collectAccount) {
          res.data.collectAccount = {
            bank: '', payName: '', payNum: '', province: '', subBank: ''
          };
        }
        if (res.data.collectMoneyData && res.data.collectMoneyData.list) {
          res.data.collectMoneyData.list.map(item => {
            item.settlementAmount = item.settlementAmount || item.settlementAmount === 0 ? (item.settlementAmount / 100).toFixed(2) : item.settlementAmount;
            item.withdrawAmount = item.withdrawAmount || item.withdrawAmount === 0 ? (item.withdrawAmount / 100).toFixed(2) : item.withdrawAmount;
            item.actualAmount = item.actualAmount || item.actualAmount === 0 ? (item.actualAmount / 100).toFixed(2) : item.actualAmount;
            return item;
          });
        }
        if (res.data.contractList === null) {
          res.data.contractList = [];
        }
        if (res.data.contractSign === 0 && res.data.contractList && res.data.contractList.length) {
          res.data.contractList.map(it => {
            it.userName = it.proposerName;
            if (it.contractSourceType === 1) it.disable = true;
            return it;
          });
        }
        res.data.settlementAmountTotal = Math.round(res.data.settlementAmountTotal * 100) / 100;
        this.widthdrawInfo = JSON.parse(JSON.stringify(res.data));
      }).catch(err => {
        console.error(err);
      });
    },
    successSettle() { // 完成结算
      examineComplete(this.settleId).then(res => {
        this.$message.success('结算完成');
        // 跳转至结算完成页面
        this.$emit('setStepId', { process: 4 });
        this.$emit('updateDetail');
      });
    },
    // 关闭结算
    closeSettle() {
      showModal('请确认是否关闭该结算单', '', {
        confirmButtonText: '确定',
        cancelButtonText: '再想想',
        type: 'warning',
        lockScroll: false,
        customClass: 'del-message del-message-cancel',
        iconClass: 'del-icon',
        center: true
      }).then(() => {
        supplierCloseAccountRecall(this.settleId).then(res => {
          this.$message.success('结算关闭');
          // 跳转至结算完成页面
          this.$emit('setStepId', { process: 3 });
          this.$emit('updateDetail');
        }).catch(err => console.error(err));
      });
    },
    async saveInvole(item, isSubmit = false) {
      const params = {
        id: item.id,
        invoiceList: []
      };
      if (this.$refs.CurrentWidthdrawInfoRef) {
        this.saveLoading = true;
        if (this.isOnlyInvoiceNumber()) {
          this.saveLoading = false;
          return new Promise((resolve, reject) => {
            reject();
          });
        }
        params.invoiceList = this.$refs.CurrentWidthdrawInfoRef.invoiceList || [];
        if (params.invoiceList && params.invoiceList.length > 0) {
          params.invoiceList.forEach(i => {
            if (i.invoicePrice) i.invoicePrice = Number(i.invoicePrice);
            if (i.tax) i.tax = Number(i.tax);
          });
        }
        params.invoiceList = params.invoiceList.concat(this.$refs.CurrentWidthdrawInfoRef.delInvoiceList || []);
        try {
          await this.$refs.CurrentWidthdrawInfoRef.validateInvole();
          try {
            const res = await setInvoleList(params);
            this.saveLoading = false;
            if (res.code === 200) {
              this.$message.success('保存成功');
              if (!isSubmit) {
                this.$emit('updateDetail');
              }
            } else {
              this.$message.error(res.message);
              return new Promise((resolve, reject) => {
                reject();
              });
            }
          } catch (_) {
            this.saveLoading = false;
            return new Promise((resolve, reject) => {
              reject();
            });
          }
        } catch (_) {
          this.saveLoading = false;
          this.$message.error('请检查信息是否填写完整');
          return new Promise((resolve, reject) => {
            reject();
          });
        }
      }
    },
    // 验证发票号码唯一性
    isOnlyInvoiceNumber() {
      const invoiceList = this.$refs.CurrentWidthdrawInfoRef.invoiceList;
      if (invoiceList.length === 0) {
        ElMessage.warning('发票信息不能为空！');
        return true;
      }
      if (invoiceList.length > 0 && invoiceList[0].invoiceNumber) {
        const temp = invoiceList.map(item => item.invoiceNumber);
        if (Array.from(new Set(temp)).length < temp.length) {
          ElMessage.warning('发票号码重复！');
          return true;
        }
      }
    },
    toBack() {
      if (this.$route.query.fromTodo) {
        this.$router.go(-1);
      } else {
        this.$router.push({
          name: 'supplier'
        });
      }
    },
    setCurrentAccountType(accountType, extend) {
      this.currentAccountType = Number(accountType);
      this.currentInfo = extend;
      this.$set(this.supplierData, 'supplier', extend.channelName);
    },
    // 催办通知回调
    async pressSendMsg(data) {
      data.url = `${data.url}?settleId=${this.settleId}&id=${this.supplierId}&isSettle=true`;
      try {
        const { code } = await pressSendMsg(data);
        if (code === 200) {
          // 成功
          this.queryProcessData();
        }
      } catch (error) {
        console.error(error);
      }
    },
    // 审批审批转交
    handleApproverChange(id) {
      this.selectedId = id + '';
      this.$refs['approverChangeDialog'].dialogVisible = true;
    },
    showCommentDialog() {
      this.$refs['commentDialogRef'].dialogVisible = true;
    },
    onCommentStatusChange(status) {
      this.commentStatus = status;
      this.getProcessList(this.workFlowId);
    },
    onReplyComment(commentData) {
      this.$refs['commentDialogRef'].dialogVisible = true;
      this.$refs['commentDialogRef'].handleReply(commentData);
    },
    commentSendCallback() {
      this.getProcessList(this.workFlowId);
      this.progressType = 0;
      this.isShowProcess = true;
    },
    handleModify() { // 节点修改
      const row = {
        id: this.examinId,
        examinId: this.examinId,
        isModifyForm: 1,
        workFlowId: this.workFlowId
      };
      this.toEdit(row, false);
    },
    getSupplierHistoryDetail(id) { // 历史版本数据回填
      getHistoryDetail({ id }).then(res => {
        this.$refs.CurrentWidthdrawInfoRef.handleDetailData(res);
        this.$emit('changeChannelName', res.data.channelName);
      }).catch(err => {
        console.log(err);
      });
    }
  }
};
</script>
<style lang="scss" scoped>
@import url('../common.scss');
::v-deep .el-drawer {
  min-width: 300px;
}
.progress-type-box {
  display: flex;
  margin: 0 12px;
  border-bottom: 1px solid #E6EDFF;
  padding-top: 12px;
  .progress-type-btn {
    cursor: pointer;
    font-size: 16px;
    color: #333333;
    margin-right: 32px;
    padding-bottom: 5px;
    &.active {
      color: #406EFF;
      font-weight: bold;
      border-bottom: 2px solid #406EFF;
    }
  }
  .progress-type-btn:last-child {
    margin-right: 0px;
  }
}
.empty-btn-style {
  border-color: #406EFF;
  background: #fff;
  color: #406EFF;
  padding: 7px 16px;
}
.process-content-box {
  height: calc(100vh - 44px) ;
  padding: 4px 5px 0 12px;
  @include scrollBar($x: hidden, $y: auto);
}
.settlement-audit-wrap {
  position: relative;
  .table-box {
    padding: 24px;
    padding-top: 0;
  }
  .suspend-btn {
    position: fixed;
    right: 16px;
    top: 50%;
    z-index: 100;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    color: #fff;
    cursor: pointer;
    background: linear-gradient(163deg, #93ADFF 0%, #2754E2 100%);
    box-shadow: 0px 3px 7px rgba(39, 84, 226, 0.31);
    .icon {
      font-size: 16px;
      font-weight: 500;
    }
    .text {
      font-size: 12px;
    }
    .suspend-btn-img {
      width: 14px;
      height: 17px;
    }
  }
  ::v-deep .process-operation {
    position: relative;
  }
  .base-info-wrap {
    margin-top: 6px;
    padding: 0 24px;
    &::v-deep {
      .el-form-item__label {
        padding-right: 12px !important;
      }
    }
    .pay-application-title {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
    }
    .pay-application-tab-list {
      display: flex;
      border-bottom: 1px solid #ddd;
      margin-bottom: 16px;
      .tab-item {
        font-size: 16px;
        cursor: pointer;
        margin-right: 8px;
        line-height: 32px;
        text-align: center;
        width: 140px;
        height: 32px;
        background: #f7f8fa;
        border: 1px solid #dddddd;
        border-radius: 4px 4px 0px 0px;
        border-bottom: none;
        margin-bottom: -1px;
        z-index: 2;
        border-bottom: 1px solid #ddd;
        &.active {
          background-color: #fff;
          color: #406eff;
          font-weight: bold;
          border-bottom: 1px solid #fff;
        }
      }
    }
  }
}
.settlement-audit-wrap {
  &::v-deep {
    .el-form-item__label {
      padding: 0;
    }
  }
}
.btns-container {
  margin-top: 20px;
  &::v-deep {
    .el-button {
      padding: 12px;
    }
  }
}
</style>
<style lang="scss">
.message-btn-margin  .el-message-box__btns .el-button--default:first-child {
    margin-right: -220px;
}
  .settlement-audit-wrap {
    .process-drawer {
      @media screen and (max-width: 500px){
        max-width: 400px!important;
        width: 90%!important;
      }
      & ::v-deep {
        .el-drawer__body {
          height: 100%;
        }
      }
    }
  }
.examine-tip {
  font-size: 14px;
  color: #999;
  margin-bottom: 8px;
  .label  {
    color: #333;
    font-weight: bold;
  }
}
</style>
